<template>
  <div class="side-menu-container">
    <div class="content">
      <div v-for="item in list" :key="item.id" class="item" :class="item.id === selectedId && 'active'" @click.stop="handleClick(item)">
        <div class="name">
          {{ item.deviceName }}
        </div>
        <div v-if="token" class="btns">
          <el-button size="small" type="text" icon="el-icon-edit-outline" @click.stop="handleEdit(item)" />
          <el-button size="small" type="text" icon="el-icon-delete" @click.stop="handleDelete(item)" />
        </div>
      </div>
    </div>
    <div v-if="token" class="footer">
      <el-button size="small" type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
    </div>
    <ManageObjectsDialog :editing-device="editingDevice" :visible.sync="visible" @onSuccess="handleSuccess" />
  </div>
</template>
<script>
import ManageObjectsDialog from '@/components/ManageObjectsDialog'
import { queryDeviceNodeList, deleteDevice } from '@/api/device'
import { mapGetters } from 'vuex'
export default {
  name: 'SideMenu',
  components: { ManageObjectsDialog },
  data() {
    return {
      list: [],
      visible: false,
      selectedId: '',
      editingDevice: null
    }
  },
  computed: {
    ...mapGetters([
      'token'
    ])
  },
  mounted() {
    this.getDeviceNodeList()
  },
  methods: {
    getDeviceNodeList() {
      const { id } = this.$route.meta
      queryDeviceNodeList({ pid: id }).then(({ success, data }) => {
        if (success) {
          this.list = data || []
          if (data.length) {
            this.selectedId = data[0]?.id
            this.$emit('onMenuClick', data[0])
          }
        }
      })
    },
    handleAdd() {
      this.editingDevice = null
      this.visible = true
    },
    handleEdit(item) {
      this.editingDevice = item
      this.visible = true
    },
    handleDelete(item) {
      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteDevice({
          id: item.id
        }).then(({ success }) => {
          if (success) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getDeviceNodeList()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleClick(item) {
      if (item.id === this.selectedId) return
      this.selectedId = item.id
      this.$emit('onMenuClick', item)
    },
    handleSuccess() {
      this.getDeviceNodeList()
    }
  }
}
</script>

<style lang="scss" scoped>
.side-menu-container {
  width: 255px;
  height: calc(100vh - 125px);
  border-radius: 4px;
  padding: 16px;
  border: 1px solid #EBEEF5;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-shadow: rgba(0, 0, 0, 0.08) 0 2px 8px 1px;

  .content {
    flex: 1;
    overflow: auto;
    .item {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-content: center;
      width: 100%;
      height: 32px;
      margin-bottom: 8px;
      padding: 0 16px;
      cursor: pointer;
      border-radius: 4px;
      .name {
        flex: 1;
        align-self: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
        color: #1A1A1A;
      }
      .btns {
        display: none;
        button {
          font-size: 16px;
        }
      }
      &:hover {
        background-color: #cdeafa;
        .btns {
          display: block;
        }
      }
      &.active {
        background-color: #3fadea;
        .name {
          color: #ffffff;
        }
        .btns {
          button {
            color: #ffffff;
          }
        }
      }
    }
  }

  .footer {
    text-align: center;
    padding-top: 16px;
  }
}
</style>
